<script setup>
import {computed, inject, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRef, watchEffect} from "vue";
// import {changeMouse} from "@/hook/mouseClick.js";

let firstName = ref('')
let endName = ref('')

let fullName = computed({
    get() {
        return firstName.value + endName.value
    },
    // set(val){
    //     console.log(val)
    // }
})
// watch([firstName,endName],(newVal,oldValue)=>{
//     console.log(`newVal:`+newVal.toString());
//     console.log(`oldVal:`+oldValue.toString())
// },{immediate:true,deep:true})

watchEffect(() => {
    // console.log(firstName.value)
    // console.log(endName.value)
})
// let {x,y}=changeMouse();
let obj = readonly({
    name: 'zs',
    age: 18,
    innerObj: {
        name1: 'ls',
        age1: 19
    }
});
console.log(obj)
let obj1 = shallowReadonly({
    name: 'sb',
    innerObj: {
        age: 20
    }
})
let obj2 = shallowReactive({
    name: 'sb',
    innerObj1: {
        age: 20
    }
})
let obj3 = shallowRef({
    name: 'sb',
    innerObj1: {
        age: 20
    }
})
let obj_4 = reactive({
    age: 70
})

//let obj_5=toRef(obj_4,'age')
function action() {

    // obj.name='ls';
    // obj.innerObj.age1=20;
    // obj1.name='ls';
    obj1.innerObj.age = 22;
    // obj2.name='cxk';
    obj2.innerObj1.age = 250;
    obj3.value = {name: 'caixukun'};
    obj_4.age = 20;
    // obj_5.value=2020;


}
</script>

<template>
  <!--  x:{{x}}-->
  <!--  y:{{y}}-->

  姓：<input type='text' v-model='firstName'>
  名：<input type='text' v-model='endName'>
  姓名：<input type='text' v-model='fullName'>
    <button @click="action">代码，启动！</button>
  <!--  {{obj1.innerObj.age}}-->
  {{ obj2.name }}
  {{ obj2.innerObj1.age }}

    <br>
  {{ obj3.name }}
    <br>
  {{ obj_4.age }}
  <!--  {{obj_5}}-->

</template>

<style scoped>

</style>